<template>
  <div class="mv">
    <div
      class="singerMv mvStyle"
      :class="{
        videoHeight: videoType == 'video',
        mvHeight: videoType == 'mv',
        searchVideoHeight: videoType == 'searchVideo'
      }"
      v-infinite-scroll="load"
      :infinite-scroll-disabled="disabled"
      :infinite-scroll-distance="200"
      :infinite-scroll-immediate="false"
    >
      <div
        class="mvItem"
        v-for="(item, index) in videoList.mvs
          ? videoList.mvs
          : videoListArray.length > 0
          ? videoListArray
          : mvList"
        :key="index"
        @click="
          handleCLick(item.id || item.data?.vid || item.vid, index, item.type)
        "
      >
        <div class="imgBj">
          <img
            :src="
              (videoType == 'singerMv'
                ? item.imgurl
                : item.data?.coverUrl || item.cover || item.coverUrl) +
              '?param=680y400'
            "
            alt=""
          />
          <div class="icon">
            <i class="el-icon-video-play"></i>
            <div class="playerNum">
              {{
                item.playCount ||
                item.data?.playTime ||
                item.playTime | handleNum
              }}
            </div>
          </div>
          <div class="time">
            {{
              item.duration ||
              item.data?.durationms ||
              item.durationms | handleMusicTime
            }}
          </div>
        </div>
        <div class="info">
          {{ item.name || item.data?.title || item.title }}
        </div>
      </div>
    </div>
    <el-backtop target=".mvStyle"></el-backtop>
  </div>
</template>
<script>
import { handleNum, handleMusicTime } from '@/plugins/utils'
export default {
  data() {
    return {
      // 无限滚动是否可用
      disabled: false
    }
  },
  props: {
    videoList: {
      type: Object,
      default() {
        return {}
      }
    },
    videoListArray: {
      type: Array,
      default() {
        return []
      }
    },
    mvList: {
      type: Array,
      default() {
        return []
      }
    },
    // 是否触底加载
    isLoad: {
      type: Boolean,
      default() {
        return false
      }
    },
    videoType: {
      type: String,
      default() {
        return 'singerMv'
      }
    }
  },
  methods: {
    handleCLick(id, index, type) {
      // console.log(id, index, type)
      this.$emit('clickMvItem', id, index, type)
    },
    // 上拉触底触发
    load() {
      this.$emit('bottomLoad')
      // 触发load后加载数据 期间不允许再次触发load事件
      this.disabled = true
      // console.log(this.disabled)
    }
  },
  created() {
    // console.log(this.videoType, this.videoList)
  },
  filters: {
    handleNum,
    handleMusicTime
  },
  watch: {
    //   数据更新后，再次运行触发load事件
    videoList() {
      if (this.isLoad == true) {
        if (this.videoList.length != 0) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      }
    },
    videoListArray() {
      if (this.isLoad == true) {
        if (this.videoList.length != 0) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      }
    },
    mvList() {
      if (this.isLoad == true) {
        if (this.videoList.length != 0) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// singerMv
.singerMv {
  margin-top: 20px;
  .mvItem {
    width: 300px;
    // height: 100%;
    height: 220px;
    // background-color: pink;
    // position: relative;

    cursor: pointer;

    .imgBj {
      position: relative;
      img {
        border-radius: 15px;
        width: 300px;
        height: 180px;
        transition: all 0.3s;
        &:hover {
          transform: translateY(-3px);
        }
      }
      .icon {
        position: absolute;
        top: 5px;
        right: 8px;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #fff;
        .el-icon-video-play {
          font-size: 16px;
        }
      }
      .time {
        position: absolute;
        bottom: 8px;
        right: 8px;
        color: #fff;
        font-size: 14px;
      }
    }
    .info {
      padding: 0 10px;
      font-size: 16px;
      color: #000;
      text-wrap: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
// mvSTyle
.mvStyle {
  width: 100%;
  height: 51vh;
  overflow-x: hidden;
  display: flex;
  flex-wrap: wrap;
  padding-top: 10px;
  .mvItem {
    // flex: 20%;
    margin-right: 18px;
    margin-bottom: 15px;
    &:nth-child(5n) {
      margin-right: 0;
    }
  }
}
.videoHeight {
  height: 70vh;
}
.mvHeight {
  height: 60vh;
}
.searchVideoHeight {
  height: 62vh;
}
</style>
